<template>
  <div>
    <a-input-search placeholder="单位名称" style="margin-bottom: 8px;width: 160px;"
                    @change="onChange"/>
    <a-directory-tree
      :autoExpandParent="autoExpandParent"
      :defaultSelectedKeys="defaultSelectedKeys"
      :expandedKeys="expandedKeys"
      :treeData="treeData"
      @expand="onExpand"
      @select="onSelect"
    >
      <template slot="title" slot-scope="{title}">
				<span v-if="title.indexOf(searchValue) > -1">
					{{ title.substr(0, title.indexOf(searchValue)) }}
					<span style="color: #f50">{{ searchValue }}</span>
					{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
				</span>
        <span v-else>{{ title }}</span>
      </template>
    </a-directory-tree>
  </div>
</template>

<script>
  import req from '@/../static/js/http.js'

  const dataList = []
  /*获取父级*/
  const getParentKey = (key, tree) => {
    let parentKey
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i]
      if (node.children) {
        if (node.children.some(item => item.key === key)) {
          parentKey = node.key
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children)
        }
      }
    }
    return parentKey
  }
  export default {
    name: 'unitTree',
    props: ['params', 'url', 'type'],
    data() {
      return {
        searchValue: '',
        expandedKeys: [],
        autoExpandParent: true,
        treeData: [],
        defaultSelectedKeys: []
      }
    },
    methods: {
      //获取基本数据——单位树
      getBaseData() {
        const self = this;
        req(self.params, function (res) {
          if (res.treeData) {
            self.treeData = res.treeData
            let node0 = res.treeData[0], node1, node2
            self.expandedKeys.push(node0['key'])
            self.defaultSelectedKeys.push(node0['key'])
            if (node0) {
              node1 = node0['children'][0]
              self.expandedKeys.push(node1['key'])
              if (node1) {
                node2 = node1['children'][0]
                self.expandedKeys.push(node2['key'])
              }
            }
            self.generateList(self.treeData)
          }
        }, self.url, self.type)
      },
      /*生成数据组*/
      generateList(data) {
        for (let i = 0; i < data.length; i++) {
          const node = data[i]
          const key = node.key
          dataList.push({key, title: node.title})
          if (node.children) {
            this.generateList(node.children, node.key)
          }
        }
      },
      /*展开节点*/
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      /*input搜索单位*/
      onChange(e) {
        const value = e.target.value;
        const expandedKeys = dataList.map((item) => {
          if (item.title.indexOf(value) > -1) {
            return getParentKey(item.key, this.treeData)
          }
          return null
        }).filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          expandedKeys,
          searchValue: value,
          autoExpandParent: true
        })
      },
      /*选中节点*/
      onSelect(selectedKeys, info) {
        /*参数传递到父组件，处理联动的表格刷新事件*/
        this.$emit('onSelect', selectedKeys, info)
      }
    },
    mounted() {
      this.getBaseData();
    }
  }
</script>

<style scoped>
  .ant-tree {
    width: 200px;
    overflow-x: auto;
    height: 100%;
    overflow-y: hidden;
  }
</style>
